<template>
    <div style="display: flex;width: 100%;height: 100vh; ">
        <!-- 右边 -->
        <div style="width: 300px;color: rgb(12, 21, 29); min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h2
                    style="margin-top: 10px;margin-left: 30px;width: 130px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h2>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="重置组件">重置组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 绑定值，如果它是数组，长度应该是 2 -->
                    <div :style='样式1'>
                        <h4>绑定值，如果它是数组，长度应该是 2 : </h4>
                        <spen :style='样式2'>英:model-value / v-model,类型:number / string / object,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["v-model"]' size='small'
                            @change="提交改变">
                        </el-radio-group></div>
                    <!-- 只读 -->
                    <div :style='样式1'>
                        <h4>只读 : </h4>
                        <spen :style='样式2'>英:readonly,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.readonly' size='small'
                            @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 禁用 -->
                    <div :style='样式1'>
                        <h4>禁用 : </h4>
                        <spen :style='样式2'>英:disabled,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.disabled' size='small'
                            @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 输入框尺寸 -->
                    <div :style='样式1'>
                        <h4>输入框尺寸 : </h4>
                        <spen :style='样式2'>英:size,类型:enum,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.size' size='small'
                            @change="提交改变">
                            <el-radio label="large">大 </el-radio>
                            <el-radio label="default">中 </el-radio>
                            <el-radio label="small">小</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 文本框可输入 -->
                    <div :style='样式1'>
                        <h4>文本框可输入 : </h4>
                        <spen :style='样式2'>英:editable,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.editable' size='small'
                            @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否显示清除按钮 -->
                    <div :style='样式1'>
                        <h4>是否显示清除按钮 : </h4>
                        <spen :style='样式2'>英:clearable,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.clearable' size='small'
                            @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 非范围选择时的占位内容 -->
                    <div :style='样式1'>
                        <h4>非范围选择时的占位内容 : </h4>
                        <spen :style='样式2'>英:placeholder,类型:string,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.placeholder' size='small'
                            @change="提交改变">
                            <el-radio label="选择时间">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 范围选择时开始日期的占位内容 -->
                    <div :style='样式1'>
                        <h4>范围选择时开始日期的占位内容 : </h4>
                        <spen :style='样式2'>英:start-placeholder,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["start-placeholder"]'
                            size='small' @change="提交改变">
                            <el-radio label="开始时间">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 范围选择时结束日期的占位内容 -->
                    <div :style='样式1'>
                        <h4>范围选择时结束日期的占位内容 : </h4>
                        <spen :style='样式2'>英:end-placeholder,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["end-placeholder"]'
                            size='small' @change="提交改变">
                            <el-radio label="结束时间">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 显示类型 -->
                    <div :style='样式1'>
                        <h4>显示类型 : </h4>
                        <spen :style='样式2'>英:type,类型:enum,默认:date</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.type' size='small'
                            @change="提交改变">
                            <el-radio label="year">年 </el-radio>
                            <el-radio label="month">月 </el-radio>
                            <el-radio label="date">日 </el-radio>
                            <el-radio label="dates">日期组 </el-radio>
                            <el-radio label="datetime">datetime </el-radio>
                            <el-radio label="week">周 </el-radio>
                            <el-radio label="datetimerange">datetimerange </el-radio>
                            <el-radio label="daterange">daterange </el-radio>
                            <el-radio label="monthrange">monthrange </el-radio>
                            <el-radio label='date'>无</el-radio>
                        </el-radio-group></div>
                    <!-- 显示在输入框中的格式 -->
                    <div :style='样式1'>
                        <h4>显示在输入框中的格式 : </h4>
                        <spen :style='样式2'>英:format,类型:参见 date formats,默认:YYYY-MM-DD</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.format' size='small'
                            @change="提交改变">
                            <el-radio label="YYYY/MM/DD">有例子1 </el-radio>
                            <el-radio label="YYYY-MM-DD">有例子2 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- DatePicker 下拉框的类名 -->
                    <div :style='样式1'>
                        <h4>DatePicker 下拉框的类名 : </h4>
                        <spen :style='样式2'>英:popper-class,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["popper-class"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 自定义 popper 选项，更多请参考 popper.js -->
                    <div :style='样式1'>
                        <h4>自定义 popper 选项，更多请参考 popper.js : </h4>
                        <spen :style='样式2'>英:popper-options,类型:object,默认:{}</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["popper-options"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 选择范围时的分隔符 -->
                    <div :style='样式1'>
                        <h4>选择范围时的分隔符 : </h4>
                        <spen :style='样式2'>英:range-separator,类型:string,默认:'-'</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["range-separator"]'
                            size='small' @change="提交改变">
                            <el-radio label="~">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 可选，选择器打开时默认显示的时间 -->
                    <div :style='样式1'>
                        <h4>可选，选择器打开时默认显示的时间 : </h4>
                        <spen :style='样式2'>英:default-value,类型:object,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["default-value"]'
                            size='small' @change="提交改变">
                            <el-radio label="单日期">单日期例子 </el-radio>
                            <el-radio label="双日期">双日期例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 范围选择时选中日期所使用的当日内具体时刻 -->
                    <div :style='样式1'>
                        <h4>范围选择时选中日期所使用的当日内具体时刻 : </h4>
                        <spen :style='样式2'>英:default-time,类型:object,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["default-time"]'
                            size='small' @change="提交改变">
                            <el-radio label="defaultTime">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 可选，绑定值的格式。 不指定则绑定值为 Date 对象 -->
                    <div :style='样式1'>
                        <h4>可选，绑定值的格式。 不指定则绑定值为 Date 对象 : </h4>
                        <spen :style='样式2'>英:value-format,类型:参见 date formats,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["value-format"]'
                            size='small' @change="提交改变">
                            <el-radio label="YYYY|MM|DD">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 等价于原生 input id 属性 -->
                    <div :style='样式1'>
                        <h4>等价于原生 input id 属性 : </h4>
                        <spen :style='样式2'>英:id,类型:string / object,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.id' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- 等价于原生 input name 属性 -->
                    <div :style='样式1'>
                        <h4>等价于原生 input name 属性 : </h4>
                        <spen :style='样式2'>英:name,类型:string / object,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.name' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- 在范围选择器里取消两个日期面板之间的联动 -->
                    <div :style='样式1'>
                        <h4>在范围选择器里取消两个日期面板之间的联动 : </h4>
                        <spen :style='样式2'>英:unlink-panels,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["unlink-panels"]'
                            size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 自定义前缀图标 如果 type的值是TimeLikeType，那么就是 Clock，不然就是 Calendar -->
                    <div :style='样式1'>
                        <h4>自定义前缀图标 如果 type的值是TimeLikeType，那么就是 Clock，不然就是 Calendar : </h4>
                        <spen :style='样式2'>英:prefix-icon,类型:string / object,默认:''</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["prefix-icon"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 自定义清除图标 -->
                    <div :style='样式1'>
                        <h4>自定义清除图标 : </h4>
                        <spen :style='样式2'>英:clear-icon,类型:string / object,默认:CircleClose</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["clear-icon"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 是否触发表单验证 -->
                    <div :style='样式1'>
                        <h4>是否触发表单验证 : </h4>
                        <spen :style='样式2'>英:validate-event,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["validate-event"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 -->
                    <div :style='样式1'>
                        <h4>一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 : </h4>
                        <spen :style='样式2'>英:disabled-date,类型:Function,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["disabled-date"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 设置快捷选项，需要传入数组对象 -->
                    <div :style='样式1'>
                        <h4>设置快捷选项，需要传入数组对象 : </h4>
                        <spen :style='样式2'>英:shortcuts,类型:object,默认:[]</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.shortcuts' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- 设置自定义类名 -->
                    <div :style='样式1'>
                        <h4>设置自定义类名 : </h4>
                        <spen :style='样式2'>英:cell-class-name,类型:Function,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["cell-class-name"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 是否将 date-picker 的下拉列表插入至 body 元素 -->
                    <div :style='样式1'>
                        <h4>是否将 date-picker 的下拉列表插入至 body 元素 : </h4>
                        <spen :style='样式2'>英:teleported,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.teleported' size='small'
                            @change="提交改变"></el-radio-group></div>

                </el-scrollbar>

            </div>
        </div>
        <!-- 左边 -->
        <div style="width: calc(100vw - 300px);;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <el-date-picker v-model="绑定值" v-bind="属性" @change="选定时候触发" style="margin-top: 20px;" />
            <el-input v-model="代码" :autosize="{ minRows: 5, maxRows: 50 }" type="textarea" placeholder="代码展示" style="width: 98%;margin-top: 50px;"/>
        </div>
    </div>
</template>
<script setup>
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
const 提交方法 = proxy.API.提交方法 //提交方法('方法名',.....其他参数)
const ws广播 = proxy.API.监听ws广播 //监听ws广播('方法名',function(参数)) //广播 就是所有用户都会收到
const ws标识 = proxy.API.监听ws标识 //监听ws标识('方法名','标识',function(参数)) // 标识 相同标识的都会收到  比如多用户账号指定某账号  和 账号多处登录
const 跳转路由 = proxy.router

const 绑定值 = ref('')
const 选定时候触发 = () => { console.log(绑定值.value) }

const 代码 = ref('')
const 提交改变 = async () => {
    let 结果 = await 提交方法("组件修改", 组件名.value, 属性.value)
    代码.value = 结果
}

const 组件名 = ref('日期选择器')
const 属性 = ref({
    //v-model: null,//绑定值，如果它是数组，长度应该是 2
    readonly: null,//只读
    disabled: null,//禁用
    size: null,//输入框尺寸
    editable: null,//文本框可输入
    clearable: null,//是否显示清除按钮
    placeholder: '',//非范围选择时的占位内容
    "start-placeholder": "",//范围选择时开始日期的占位内容
    "end-placeholder": "",//范围选择时结束日期的占位内容
    type: 'date',//显示类型
    format: null,//显示在输入框中的格式
    //"popper-class": null,//DatePicker 下拉框的类名
    //"popper-options": null,//自定义 popper 选项，更多请参考 popper.js
    //"range-separator": "-",//选择范围时的分隔符
    //"default-value": null,//可选，选择器打开时默认显示的时间
    // "default-time": null,//范围选择时选中日期所使用的当日内具体时刻
    "value-format": null,//可选，绑定值的格式。 不指定则绑定值为 Date 对象
    id: null,//等价于原生 input id 属性
    name: null,//等价于原生 input name 属性
    "unlink-panels": null,//在范围选择器里取消两个日期面板之间的联动

    //  "prefix-icon": null,//自定义前缀图标 如果 type的值是TimeLikeType，那么就是 Clock，不然就是 Calendar
    //  "clear-icon": null,//自定义清除图标
    //  "validate-event": null,//是否触发表单验证
    //  "disabled-date": null,//一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。
    //shortcuts: null,//设置快捷选项，需要传入数组对象
    //  "cell-class-name": null,//设置自定义类名
    //  teleported: null,//是否将 date-picker 的下拉列表插入至 body 元素

})

const 重置组件 = () => {
    let 原生属性 = {
        //v-model: null,//绑定值，如果它是数组，长度应该是 2
        readonly: null,//只读
        disabled: null,//禁用
        size: null,//输入框尺寸
        editable: null,//文本框可输入
        clearable: null,//是否显示清除按钮
        placeholder: '',//非范围选择时的占位内容
        "start-placeholder": "",//范围选择时开始日期的占位内容
        "end-placeholder": "",//范围选择时结束日期的占位内容
        type: 'date',//显示类型
        format: null,//显示在输入框中的格式
        //"popper-class": null,//DatePicker 下拉框的类名
        //"popper-options": null,//自定义 popper 选项，更多请参考 popper.js
        //"range-separator": "-",//选择范围时的分隔符
        //"default-value": null,//可选，选择器打开时默认显示的时间
        // "default-time": null,//范围选择时选中日期所使用的当日内具体时刻
        "value-format": null,//可选，绑定值的格式。 不指定则绑定值为 Date 对象
        id: null,//等价于原生 input id 属性
        name: null,//等价于原生 input name 属性
        "unlink-panels": null,//在范围选择器里取消两个日期面板之间的联动

        //  "prefix-icon": null,//自定义前缀图标 如果 type的值是TimeLikeType，那么就是 Clock，不然就是 Calendar
        //  "clear-icon": null,//自定义清除图标
        //  "validate-event": null,//是否触发表单验证
        //  "disabled-date": null,//一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。
        //shortcuts: null,//设置快捷选项，需要传入数组对象
        //  "cell-class-name": null,//设置自定义类名
        //  teleported: null,//是否将 date-picker 的下拉列表插入至 body 元素

    }
    属性.value = 原生属性
    绑定值.value=''
    提交改变()
}


const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 5px;font-size: 14px;border: 1px solid #ccc;width:95%')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')

</script>
<style  scoped></style>
